<template>
  <view v-if="signRecord">
    <view class="sign-bg">
    <view class="sign flex-col">
      <view class="sign-plate flex-col">
        <span class="title">连续签到领好礼</span>
        <view class="group-day flex-row">
          <template v-for="sign in signRecord">
            <view :key="sign.day" :class="getClass(sign.day, sign.is_sign)">
              <span class="day-num">第{{ sign.day }}天</span>
              <img v-if="sign.is_sign" class="day-select" src="/static/icon/selected.png"/>
              <span v-else class="integral">积分+{{sign.credit}}</span>
            </view>
          </template>

        </view>
        <view class="sign-mod flex-col"  @click="clickSignHandel">
          <span class="sign-btn">签到领奖励</span>
        </view>
      </view>
    </view>
  </view>
    <uni-popup ref="popup" style="padding: 0;" :boxStyle="{'background-color': 'rgba(0,0,0,0)','overflow-y': 'unset'}" type="center">
      <view class="popups-box">
        <view class="popups-header">
          <image class="header-img" src="/static/images/sign-header.png" alt="" />
          <text class="header-title">签到成功</text>
        </view>
        <view class="body">
          <view class="sign-int">积分+{{ currentDay.credit }}</view>
          <view class="sign-tip">已连续签到{{ currentDay.day }}天</view>
        </view>
        <view class="confirm-btn">
          <view class="btn" @click="cancelModalBtn">我知道了</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
  components:{
    uniPopup
  },
  data(){
    return {
      // signShow: false,
      signRecord: [],
      is_sign_today: false,
      currentDay: {},
    }
  },
  mounted(){
    // this.$refs.popup.open()
    this.getSignData();
  },
  methods:{
    // 获取签到数据
    getSignData(){
      let that = this;
      that.$Request.request('/api/user_center/signindex', 'GET').then(res => {
        if (res.status == 1) {
          const {list, is_sign_today} = res.data;
          this.signRecord = list;
          this.is_sign_today = is_sign_today == 1 ? true: false;
        }
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'error'
        })
      })
    },
    getClass(day, is_sign){
      let cla = day < 7 ? 'day-mod  flex-col' : 'day-mod sunday flex-col';
      return is_sign ? cla + ' selected' : cla;
    },
    cancelModalBtn(){
      this.$refs.popup.close()
    },
    // 点击签到
    clickSignHandel(){
      if (this.is_sign_today === true){
        uni.showToast({
          title: '今天已经签到了',
          icon: 'none'
        })
        return ;
      }

      let that = this;
      that.$Request.request('/api/user_center/sign', 'POST').then(res => {
        if (res.status == 1) {
          // 改变今天签到的状态
          for (let i in this.signRecord){
            const sign = this.signRecord[i];
            if (sign.is_tody){
              sign.is_sign = true;
              this.$set(this.signRecord, i, sign)
              break;
            }
          }
          this.currentDay = res.data;
          this.$refs.popup.open();
        }
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'error'
        })
      })
    }
  }
}
</script>
<style lang="scss">
.sign-bg{
  padding-top: 50rpx;
  width: 100%;
  background: linear-gradient(180deg, #EE5B25 0%, rgba(238, 91, 37, 0) 100%);
}
.sign {
  z-index: 8;
  height: 640rpx;
  background-image: url('/static/images/sign-plate.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  align-self: center;
  width: 720rpx;
  justify-content: flex-end;
  align-items: center;
  margin: 0rpx auto;

  .sign-plate {
    position: relative;
    top: -50rpx;
    z-index: auto;
    width: 632rpx;
    height: 488rpx;
    .title {
      z-index: 18;
      width: 252rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(29, 30, 34, 1);
      font-size: 36rpx;
      line-height: 50rpx;
      text-align: center;
      align-self: flex-start;
      margin: 0 auto;
    }
    &:after{
      zoom:1;
      content: '';
      display: block;
      clear: both;
      visibility:hidden;
      height:0
    }
    .group-day {
      z-index: auto;
      //width: 632rpx;
      margin-top: 74rpx;
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      place-items: center;
      //grid-template-rows: 30%;
      height:240rpx;
      .selected{
        border: 1px solid rgba(238, 72, 108, 1);
        border-radius: 10rpx;
        background: #ffeef2 !important;
        .day-num{
          color: rgba(238, 72, 108, 1) !important;
        }
      }
      .day-mod {
        z-index: 20;
        height: 106rpx;
        border-radius: 10rpx;
        background: #F4F4F4;
        width: 146rpx;
        justify-content: center;
        align-items: center;
        display: flex;

        .day-num {
          z-index: 21;
          width: 109rpx;
          display: block;
          overflow-wrap: break-word;
          color: #7A7C80;
          font-size: 24rpx;
          line-height: 34rpx;
          text-align: center;
          align-self: center;
        }
        .day-select {
          z-index: 47;
          width: 36rpx;
          height: 26rpx;
          align-self: center;
          margin-top: 6rpx;
        }

        .integral {
          margin-top: 10rpx;
          z-index: 22;
          //position: absolute;
          //left: 36px;
          //top: 32px;
          //width: 100rpx;
          display: block;
          text-align: center;
          overflow-wrap: break-word;
          color: $base-color;
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
      .sunday{
        width: 304rpx;
        margin-left: 6rpx;
        place-self: center baseline;
      }
    }
    .sign-mod {
      z-index: 16;
      height: 76rpx;
      border-radius: 38rpx;
      background-color: rgba(238, 72, 108, 1);
      align-self: center;
      //margin-top: 40rpx;
      margin: 0px auto;
      margin-top: 30rpx;
      width: 632rpx;
      justify-content: center;
      align-items: center;
      .sign-btn {
        z-index: 17;
        width: 150rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 30rpx;
        line-height: 42rpx;
        text-align: center;
      }
    }
  }
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.popups-box{
  width: 100%;
  height: 400rpx;
  background: #ffffff;
  border-radius: 28rpx;
  padding: 20rpx;
  .popups-header{
    position: relative;
    z-index: 999;
    height: 120rpx;
    .header-img{
      width: 428rpx;
      height: 242rpx;
      left: 50%;
      margin-left: -214rpx;
      position: absolute;
      top: -155rpx;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .header-title{
      position: absolute;
      width: 428rpx;
      left: 50%;
      margin-left: -214rpx;
      z-index: 1;
      text-align: center;
      color: white;
      top: -40rpx;
    }
  }
  .body{
    width: 100%;
    .sign-int{
      height: 40rpx;
      font-size: 56rpx;
      font-weight: 600;
      color: $base-color;
      line-height: 40rpx;
      text-align: center;
      margin-bottom: 30rpx;
    }
    .sign-tip{
      text-align: center;
      height: 40rpx;
      font-size: 28rpx;
      //font-weight: 600;
      color: #969696;
      line-height: 40rpx;
    }
  }

  .confirm-btn{
    .btn{
      text-align: center;
      display: block;
      width: 480rpx;
      height: 76rpx;
      line-height: 76rpx;
      background: #EE486C;
      border-radius: 38rpx;
      margin: 0 auto;
      color: white;
      margin-top: 40rpx;
    }

  }
}

</style>
